<template>
  <div class="activitie-detail-main base-main bgcFFF">
    <!--头部-->
    <img class="head-img w100" :src="data.src" alt="">
    <div class="head pdlr15">
      <div class="head-msg color45454D">
        <p class="title">
          {{data.title}}
        </p>
        <div class="msg line-bottom fs16">
          <p>
            <i class="iconfont iconyonghu"></i>
            {{data.obj}}
          </p>
          <p>
            <i class="iconfont iconrili3"></i>
            {{data.time}}
          </p>
          <p v-if="data.address">
            <i class="iconfont iconshijian3"></i>
            {{data.address}}
          </p>
        </div>
      </div>
    </div>
    <!--头部-->

    <!--人报名数-->
    <div class="willN-num-box pdlr15">
      <p class="apply-num fs18 color45454D">已有{{data.applyNum}}人报名</p>
      <p class="img-box">
        <span v-for="(item, index) in data.applyImgList"
              :key="index"
              class="pr inline-block">
          <img :src="item.src" alt="">
        </span>
      </p>

      <p class="line-bottom"></p>
    </div>
    <!--人报名数-->

    <!--活动详情-->
    <div class="activitie-detail pdlr15">
      <p class="fs18 color45454D">活动详情</p>
      <div v-html="data.content"></div>
    </div>
    <!--活动详情-->

    <div class="apply-box w100 bgcFFF">
      <van-row class="text-c">
        <van-col span="10">
          <div class="box box-l inline-block w100">
            <span class="inline-block color333 fs15" @click="share">
              <i class="pr color3D7EFF fs18 iconfont iconfenxiangx"></i>
              分享
            </span>
          </div>
        </van-col>
        <van-col span="14">
          <div class="box box-r inline-block w100">
            <span class="inline-block colorFFF fs15" @click="handleApply">
              立即报名
            </span>
          </div>
        </van-col>
      </van-row>
    </div>

    <!--线下活动报名-->
    <div class="popup-box" v-if="offLineApplyShow">
      <div class="content-box bgcFFF absolute-center text-c">
        <img class="title-img pr" :src="imgOfflineApplyHead" alt="">
        <p class="txt text-c fs12 color333">请务必填写真实信息资料</p>
        <p class="txt text-c fs12 color333">活动资料会发送您预留的的手机号码</p>
        <div class="input-box color45454D fs14">
          <p class="flex">
            <span class="text-r">
              姓名：
            </span>
            <input v-model="userName" type="text" placeholder="请输入">
          </p>
          <p class="flex">
            <span class="text-r">
              手机号：
            </span>
            <input v-model="phoneNum" type="number" placeholder="请输入">
          </p>
          <p class="flex pr">
            <span class="text-r">
              验证码：
            </span>
            <input v-model="code" type="number" placeholder="请输入">
            <i class="pa color3D7EFF" @click="getCode">{{codeTxt}}</i>
          </p>
        </div>

        <div class="btn-box">
          <p class="base-btn apply-btn fs15" @click="handleOffLineApply">立即报名</p>
          <p class="cancel-btn text-c fs15 color45454D" @click="offLineApplyShow=false">取消</p>
        </div>
      </div>

    </div>
    <!--线上活动报名成功-->
    <RegistrationWin :isShowPop="onLineApplyShow" @close="handleClose"></RegistrationWin>
  </div>
</template>

<script type="text/ecmascript-6">
  import RegistrationWin from '../../components/RegistrationWin.vue'

  import visitor from '../../assets/img/icon_visitor.png'
  import imgOfflineApplyHead from '../../assets/img/img_offline_apply.png'
  export default {
    components: {
      RegistrationWin,
    },
    data() {
      return {
        data: {
          src: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg', // 顶部图片
          title: '新用户专享首单即送豪华大礼包，先到先得',//标题
          obj: '索弗商城新用户可参与',//参加对象
          time: '2020.08.29，时长30天',//活动时间
          address: '广州市，花都区迎宾大道116号索弗大厦',//地址
          applyNum: 35,//报名人数
          applyImgList: [
            {
              src: visitor
            },
            {
              src: visitor
            },
            {
              src: visitor
            },
            {
              src: visitor
            },
            {
              src: visitor
            },
          ], //报名头像数据
          content:'索弗生活，轻松享未来,这里是活动详情文案这里是活动详情文案这里是\n' +
          '活动详情文案，这里是活动详情文案这里是活动\n' +
          '详情文案，这里是活动详情文案这里是活动详情\n' +
          '文案。', //详情
        },
        onLineApplyShow: false,//线上报名成功
        offLineApplyShow: false,//线下报名成功
        userName: '',
        phoneNum: '',
        code: '',
        codeTxt: '获取验证码', //获取验证码文案
        imgOfflineApplyHead: imgOfflineApplyHead,
        isCode: false,
        isPost: false,
      }
    },
    methods: {
      // 点击分享
      share() {
        console.log('点击分享');
      },
      // 立即报名
      handleApply() {
        this.offLineApplyShow = true
      },
      // 关闭弹窗
      handleClose() {
        this.onLineApplyShow = false
      },
      //获取验证码
      getCode() {
        console.log('获取验证码');

        const _this = this
        if(_this.isCode)return false;
        _this.isCode = true
        let time = 60
        let timer = setInterval(() => {
          if(time === -1) {
            clearInterval(timer)
            _this.isCode = false
          }
          _this.codeTxt = time < 0 ? '获取验证码' : `${time--}s`
        }, 1000)
      },
      // 线下点击报名
      handleOffLineApply() {
        console.log('线下点击报名');
        let phoneReg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$");

        if(this.isPost)return false;
        this.isPost = true
        if(!this.userName) {
          this.$toast('请填写用户名')
          return false
        } else if(!this.phoneNum) {
          this.$toast('请填写手机号')
        } else if(!phoneReg.test(this.phone)) {
          this.$toast('请正确填写手机号')
          return false
        } else if(!this.code) {
          this.$toast('请填写验证码')
          return false
        } else {
          this.isPost = false
          console.log(this.userName);
          console.log(this.phoneNum);
          console.log(this.code);
        }
      },
    },
  }
</script>

<style scoped lang="scss">
@import "../../assets/css/activitiDetail.scss";
</style>
